<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <base href="<%=basePath%>">
    
    <title>${ webpageTitle }</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<script src="rp/scripts/boot.js" type="text/javascript"></script>
	
	<style type="text/css">
	   	
    </style>
	
  </head>
  
  <body class="body-fit">
  	
  	<!-- <div class="mini-toolbar" borderStyle="border:0;">
  		<table style="width: 100%;">
  			<tr>
  				<td style="width: 100%;">
  					
  				</td>
  				<td style="white-space:nowrap;">
  					
  				</td>
  			</tr>
  		</table>
    </div> -->
    
    <div style="width: 100%; height: 100%; padding: 5px;">
    	
    	<input type="hidden" id="roleId" value="${ roleId }"/>
    	
    	<div style="width: 380px; float: left;">
	    	<div style="width:100%;">
		        <div class="mini-toolbar" style="border-bottom:0;padding:3px;">
		            <span>备选权限</span>           
		        </div>
		    </div>
	    	<div id="grid" class="mini-datagrid" style="width: 100%; height: 300px;"
		    	url="rp/system/authMng/getWaitAllotAuths" idField="id" allowResize="false" pageSize="20"
		  		allowCellSelect="true" multiSelect="true" onrowdblclick="adds();">
		    	<div property="columns">
			        <div type="checkcolumn"></div>
			        <div name="name" field="name" width="70" headerAlign="center">
			        	权限名称
			        </div>
			        <div name="code" field="code" headerAlign="center">
			        	权限代码
			        </div>
			    </div>
		    </div>
	    </div>
	  	
	  	<div style="width: 60px; height: 120px; text-align:center; float: left; margin-top: 60px;">
  			<input type="button" value=">" title="加入" onclick="adds()" style="width:40px;"/><br />
            <input type="button" value=">>" title="全部加入" onclick="addAll()" style="width:40px;"/><br />
            <input type="button" value="&lt;&lt;" title="全部移除" onclick="removeAll()" style="width:40px;"/><br />
            <input type="button" value="&lt;" title="移除" onclick="removes()" style="width:40px;"/><br />
  		</div>
	  	
	  	
	  	<div style="width: 300px; float: left;">
	  		<div style="width:100%;">
		        <div class="mini-toolbar" style="border-bottom:0;padding:3px;">
		            <span>已选权限</span>           
		        </div>
		    </div>
	  		<div id="grid2" class="mini-datagrid" style="width: 100%; height: 300px;"
		    	url="rp/system/authMng/getHasAuths?roleId=${ roleId }" idField="id" allowResize="false"
		  		allowCellSelect="true" multiSelect="true" onrowdblclick="removes();" showPager="false">
			    <div property="columns">
			        <div type="checkcolumn"></div>
			        <div name="name" field="name" width="70" headerAlign="center">
			        	权限名称
			        </div>
			        <div name="code" field="code" headerAlign="center">
			        	权限代码
			        </div>
			    </div>
			</div>
	  	</div>
	  	
		
		
    </div>
    
    <div class="mini-toolbar" style="width: 100%; padding: 5px; position: fixed; bottom: 0px;" borderStyle="border:0;">
        <a class="mini-button" style="width:60px;" onclick="onOk()"><i class="fa fa-check fa-lg"></i> 确定</a>
        
        <a class="mini-button" style="width:60px;" onclick="onCancel()"><i class="fa fa-times fa-lg"></i> 取消</a>
    </div>
  	
	<script type="text/javascript">
		var grid;
		var grid2;
	
		$(function(){
			mini.parse();
			grid = mini.get("grid");
			grid2 = mini.get("grid2");
			grid.load({roleId: $("#roleId").val()});
			grid2.load();
		});
		
		
		//////////////////////////
		//获取选中的数据
		function getSelectData() {
	        var rows = grid2.data;
	        return rows;
	    }
		
		function adds() {
            var items = grid.getSelecteds();
            grid.removeRows(items);
            grid2.addRows(items);
        }
        function addAll() {
            var items = grid.getData();       
            grid.removeRows(items);
            grid2.addRows(items);
        }
        function removes() {
            var items = grid2.getSelecteds();
            grid2.removeRows(items);
            grid.addRows(items);
        }
        function removeAll() {
            var items = grid2.getData();
            grid2.removeRows(items);
            grid.addRows(items);
        }
        
		//////////////////////////
		function closeWindow(action) {
	        if (window.CloseOwnerWindow) return window.CloseOwnerWindow(action);
	        else window.close();
	    }

	    function onOk() {
	    	closeWindow("ok");
	    }
	    function onCancel() {
	    	closeWindow("cancel");
	    }
	    
	</script>
  </body>
</html>
